<template>
  <div>
    <Header_h />
    <div class="sq_box_content">
      <bannerInfo :info="info" />
      <div class="honor_h">
        <div class="container">
          <div
            class="
              honor_h_info
              s_flex
              s_justify_content_between
              s_align_items_center
              s_flex_column
            "
          >
            <div>
              <h3 class="sq_tilte1 sq_tilte_color line_h_30">国家级专利奖项</h3>
              <p class="sq_content sq_content_color line_h_26">
                国家知识产权创新荣誉
              </p>
            </div>
            <div
              class="sq_sign_btn sq_content sq_sign_btn3"
              @click="$router.push('/web/patentaward')"
            >
              查看全部
            </div>
          </div>
          <div
            class="
              honor_j
              s_flex s_justify_content_between s_align_items_center
            "
            v-if="data.prize"
          >
            <div class="honor_j_item">
              <h3 class="sq_tilte1 sq_tilte_color line_h_30 ft_weight_800">
                {{ data.prize[0] }}次
              </h3>
              <h4 class="sq_tilte2 sq_content_color">中国专利金奖</h4>
              <div>
                <p class="sq_content sq_active sq_tilte3">查看获奖专利</p>
                <div class="j1"></div>
              </div>
            </div>
            <div class="honor_j_item">
              <h3 class="sq_tilte1 sq_tilte_color line_h_30 ft_weight_800">
                {{ data.prize[1] }}次
              </h3>
              <h4 class="sq_tilte2 sq_content_color">中国专利银奖</h4>
              <div>
                <p class="sq_content sq_active sq_tilte3">查看获奖专利</p>
                <div class="j2"></div>
              </div>
            </div>
            <div class="honor_j_item">
              <h3 class="sq_tilte1 sq_tilte_color line_h_30 ft_weight_800">
                {{ data.prize[2] }}次
              </h3>
              <h4 class="sq_tilte2 sq_content_color">中国专利优秀奖</h4>
              <div>
                <p class="sq_content sq_active sq_tilte3">查看获奖专利</p>
                <div class="j3"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="guanjia_h">
        <img src="@/assets/web/honor.png" alt="" />
        <div class="container">
          <div class="guanjia_h_info info_left">
            <div
              class="
                s_flex s_flex-column
                guanjia_h_info_box
                s_justify_content_center
              "
            >
              <h3
                class="sq_tilte_color line_h_30 sq_tilte1"
                style="color: #fff"
              >
                国家知识产权示范企业
              </h3>
              <p class="sq_content sq_content_color line_h_26">
                顺德国家知识产权示范企业公示
              </p>
              <div class="company_list">
                <swipern
                  :list="data.examples"
                  :type="4"
                  :PerView="3"
                  :compoyNext="'compoyNext2'"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="guanjia_h section_padding guanjia_h_s">
        <div class="container">
          <div class="guanjia_h_info" style="position: inherit">
            <div
              class="
                s_flex s_flex-column
                guanjia_h_info_box
                s_justify_content_center
              "
            >
              <h3 class="sq_tilte_color line_h_30 sq_tilte1">
                顺德区驰名商标名录
              </h3>
              <p
                class="sq_content sq_content_color line_h_26"
                style="color: #535f7f"
              >
                顺德国家知识产权示范企业公示
              </p>
              <div class="company_list show-doc">
                <swipern
                  :list="data.trademark"
                  :type="3"
                  :PerView="1"
                  :sizeNum="size2"
                  :compoyNext="'compoyNext3'"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bs_sesion">
        <img src="@/assets/web/sekeeper2.png" alt="" />
        <div class="container">
          <div class="bs_box">
            <h3 class="sq_tilte_color line_h_30 sq_tilte1 sq_alignment">
              地理标识
            </h3>
            <div class="bs_item">
              <swipern
                v-if="data.landmark"
                :list="data.landmark"
                :type="5"
                :PerView="1"
                :compoyNext="'compoyNext5'"
              />
            </div>
            <!-- <div class="s_flex s_justify_content_between s_align_items_center">
              <div
                class="bs_item ft_weight_800"
                v-for="(item, index) in data.landmark"
                :key="index"
              >
                <img :src="item.tpic" alt="" />
                <p class="sq_tilte3">{{ item.name }}</p>
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <div class="guanjia_h section_padding guanjia_h_s1">
        <div class="container">
          <div class="guanjia_h_info" style="position: inherit">
            <div
              class="
                s_flex s_flex-column
                guanjia_h_info_box
                s_justify_content_center
              "
            >
              <h3 class="sq_tilte_color line_h_30 sq_tilte1">对话顺德</h3>
              <div class="company_list">
                <!-- <swipern
                  v-if="data.dialogue"
                  :list="data.dialogue"
                  :type="6"
                  :compoyNext="'compoyNext6'"
                /> -->
                <el-carousel
                  class="sq_xl"
                  :interval="4000"
                  type="card"
                  height="300px"
                  indicator-position="none"
                >
                  <el-carousel-item
                    v-for="(item, index) in data.dialogue"
                    :key="index"
                  >
                    <div class="tpic_box">
                      <img
                        :src="item.tpic"
                        class="card_img"
                        alt=""
                        srcset=""
                        @click="
                          $router.push({
                            path: '/web/dialogue',
                            query: { id: item.id },
                          })
                        "
                      />
                      <p>
                        {{ item.title }}
                      </p>
                    </div>
                  </el-carousel-item>
                </el-carousel>
                <el-carousel :interval="4000" class="sq_xs" height="130px">
                  <el-carousel-item
                    v-for="(item, index) in data.dialogue"
                    :key="index"
                  >
                    <div class="tpic_box">
                      <img
                        :src="item.tpic"
                        class="card_img"
                        alt=""
                        srcset=""
                        @click="
                          $router.push({
                            path: '/web/dialogue',
                            query: { id: item.id },
                          })
                        "
                      />
                      <p>
                        {{ item.title }}
                      </p>
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
    <rightMenu @moveTo="moveTo" />
  </div>
</template>

<script>
import swipern from "@/components/swipern";
import Header_h from "@/components/Header_h";
import Footer from "@/components/Footer";
import bannerInfo from "@/components/web/bannerInfo";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";
import { honorList } from "@/api/web";
import rightMenu from "@/components/web/rightMenu";

export default {
  components: {
    Header_h,
    Footer,
    bannerInfo,
    Swiper,
    SwiperSlide,
    swipern,
    rightMenu,
  },
  directives: {
    swiper: directive,
  },
  data() {
    return {
      banner: [],
      info: {
        title: "荣誉展厅",
        content:
          "从专利奖、驰名商标以及知识产权优势/示范企业等知识产权荣誉出发，展示顺德区获奖企业情况。",
        img: require("@/assets/web/banner1.png"),
      },
      data: [],
      size2: 12,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    moveTo() {
      window.scrollTo(0, 0);
    },
    async getList() {
      try {
        this.data = await honorList({
          // trademark_size: 12,
          // patent_size: 12,
        });

        // if (this.data.patent_num / 12 <= 1) {
        //   this.size = 1;
        // } else {
        //   this.size = parseInt(this.data.patent_num / 12);
        // }
        // if (this.data.trademark_num / 12 <= 1) {
        //   this.size2 = 1;
        // } else {
        //   this.size2 = parseInt(this.data.trademark_num / 12);
        // }
      } catch (error) {
        this.$message.error(error.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.honor_h {
  padding: 80px 0;
}
.sq_alignment {
  margin-bottom: 85px;
}
.honor_j_item {
  width: 30%;
  h4 {
    margin: 15px 0 30px;
  }
  p {
    margin: 0 0 20px 0;
  }
}
.honor_j {
  margin-top: 80px;
}
.honor_h_info {
  p {
    margin-top: 20px;
  }
}
.j1 {
  width: 100%;
  height: 3px;
  background: #e60013;
}
.j2 {
  width: 100%;
  height: 3px;
  background: #0193de;
}
.j3 {
  width: 100%;
  height: 3px;
  background: #039e44;
}
.guanjia_h {
  position: relative;
  .info_left {
    left: 50%;
    transform: translateX(-50%);
  }
  .guanjia_h_info {
    position: absolute;
    top: 0;
    width: 1200px;
    height: 100%;
    .guanjia_h_info_box {
      position: relative;
      height: 100%;
      div {
        // margin-top: 50px;
        // width: 115px;
        // height: 36px;
        // line-height: 36px;
        // border: 1px solid #ffffff;
        // color: #fff;
        // cursor: pointer;
      }
      p {
        width: 587px;
        margin: 20px 0 0;
        color: #fff;
      }
    }
    .company_list {
      // position: absolute;
      // top: 0;
      margin-top: 40px;
    }
  }
}
.show-doc {
  background: #fbfdff;
  box-shadow: 0px 5px 20px 0px rgba(86, 152, 190, 0.3);
  padding: 30px 0;
}
.bs_sesion {
  width: 100%;
  // overflow: hidden;
  position: relative;
  .bs_box {
    position: absolute;
    width: 1200px;
    top: -20%;
    .bs_item {
      // width: 30%;
      margin-top: 50px;
      // background: #ffffff;
      // box-shadow: 3px 1px 21px 0px rgba(24, 76, 171, 0.26);
      // padding: 30px 0;
      img {
        width: 188px;
        height: 125px;
        object-fit: contain;
        margin: 0 auto;
      }
      p {
        text-align: center;
        margin-top: 20px;
      }
    }
  }
}
.guanjia_h_s {
  margin-bottom: 75px;
}
.card_img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.tpic_box {
  position: relative;
  p {
    position: absolute;
    bottom: 0%;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 0 15px;
  }
}

@media (max-width: 750px) {
  .sq_alignment {
    margin-bottom: 0px;
  }
  .bs_sesion .bs_box {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    h3 {
      width: 90%;
      margin: 0 auto;
      color: #fff;
    }
  }
  .guanjia_h {
    width: 100%;
    overflow: hidden;
  }

  .bs_sesion .bs_box .bs_item {
    margin-top: 25px;
  }
  .guanjia_h .guanjia_h_info {
    width: 90%;
  }
  .guanjia_h_s .guanjia_h_info,
  .guanjia_h_s1 .guanjia_h_info {
    width: 100%;
  }
  .sq_box_content {
    width: 100%;
    margin: 50px auto 0;
  }
  .guanjia_h_s {
    margin-bottom: 0;
  }
  .card_img {
    width: 100%;
    height: 230px;
    object-fit: cover;
  }
  .honor_j_item {
    width: 28%;
  }
  .honor_h {
    text-align: center;
    .sq_sign_btn {
      margin-top: 30px;
    }
  }
  .guanjia_h .guanjia_h_info .guanjia_h_info_box p {
    width: 100%;
  }
  .guanjia_h_info {
    text-align: center;
  }
  .bs_sesion .bs_box h3 {
    text-align: center;
  }
}
</style>